<template>
  <el-form ref="settingFormRef" :model="settingform" :rules="rules" label-width="80px">
<!--    <h3>主图/视频</h3>-->
<!--    &lt;!&ndash; 修改"复制视频"复选框布局，将文字放在复选框前面 &ndash;&gt;-->
<!--    <el-form-item label="复制视频" label-width="auto" style="margin-left: 0;">-->
<!--      <el-checkbox v-model="settingform.jhIsCopyVideo"></el-checkbox>-->
<!--    </el-form-item>-->
<!--    &lt;!&ndash; 新增主图序号输入框 &ndash;&gt;-->
<!--    <el-form-item label="要复制的主图序号" label-width="auto" prop="jhMainImageSeq" style="margin-left: 0;">-->
<!--      <el-input v-model="settingform.jhMainImageSeq" placeholder="请输入数字"  disabled style="width: auto;" type="number"/>-->
<!--    </el-form-item>-->
<!--    &lt;!&ndash; 新增复选框 &ndash;&gt;-->
<!--    <el-form-item label="第一张主图用随机一张颜色属性图代替" label-width="auto" style="margin-left: 0;">-->
<!--      <el-checkbox v-model="settingform.jhIsFirstPictureReplace"></el-checkbox>-->
<!--    </el-form-item>-->
<!--    <el-form-item label="其他主图用颜色属性图代替" label-width="auto" style="margin-left: 0;">-->
<!--      <el-checkbox v-model="settingform.jhIsOtherPictureReplace"></el-checkbox>-->
<!--    </el-form-item>-->
<!--    <el-form-item label="主图处理：" label-width="auto" style="margin-left: 0;">-->
<!--      <el-checkbox v-model="settingform.isHorizontalFlip">水平翻转</el-checkbox>-->
<!--      <el-checkbox v-model="settingform.isVerticalFlip">垂直翻转</el-checkbox>-->
<!--      <el-checkbox v-model="settingform.isMergeImage">合并主图</el-checkbox>-->
<!--    </el-form-item>-->


<!--    <h3>颜色图</h3>-->
<!--    <el-form-item label="复制颜色属性图" label-width="auto" style="margin-left: 0;">-->
<!--      <el-checkbox v-model="settingform.jhIsCopyColor"></el-checkbox>-->
<!--    </el-form-item>-->
<!--    <span>颜色处理：</span>-->
<!--    &lt;!&ndash; 新增颜色处理复选框 &ndash;&gt;-->
<!--    <el-form-item label-width="auto" style="margin-left: 0;">-->
<!--      <el-checkbox v-model="settingform.colorHorizontalFlip">水平翻转</el-checkbox>-->
<!--      <el-checkbox v-model="settingform.colorVerticalFlip">垂直翻转</el-checkbox>-->
<!--    </el-form-item>-->
    <h3>描述/详情</h3>
    <!-- 现有单选框组 -->
    <el-form-item label-width="auto" style="margin-left: 0;">
      <el-radio-group v-model="settingform.jhDescMode">
        <el-radio label="both">复制电脑端与手机端</el-radio>
        <el-radio label="desktop">只复制电脑端</el-radio>
        <el-radio label="mobile">只复制手机端</el-radio>
        <el-radio label="none">都不复制</el-radio>
      </el-radio-group>
    </el-form-item>

    <!-- 修改描述/详情部分三个输入框的宽度比例 -->
    <div style="display: flex; gap: 0;">
      <!-- 为每个el-form-item设置统一的label-width -->
      <el-form-item label="电脑详情图去掉顶部" label-width="139px" prop="jhPcTopNum" style="margin: 0px;">
        <el-input v-model.number="settingform.jhPcTopNum" placeholder="请输入数字" style="width: 70px;margin: 0px;" type="number"/>
      </el-form-item>
      <el-form-item label="张，去掉底部" label-width="108px" prop="jhPcBottomNum" style="margin: 0px;">
        <el-input v-model.number="settingform.jhPcBottomNum" placeholder="请输入数字" style="width: 70px;margin: 0px;" type="number"/>
      </el-form-item>
      <el-form-item label="张，只保留前" label-width="108px" prop="jhPcReserveNum" style="margin: 0px;">
        <el-input v-model.number="settingform.jhPcReserveNum" placeholder="请输入数字" style="width: 70px;margin: 0px;" type="number"/>
      </el-form-item>
      <el-form-item label="张" label-width="40px" prop="zhang">
      </el-form-item>
    </div>
    <div style="display: flex; gap: 0;">
      <!-- 为每个el-form-item设置统一的label-width -->
      <el-form-item label="手机详情图去掉顶部" label-width="139px" prop="jhPhoneTopNum" style="margin: 0px;">
        <el-input v-model.number="settingform.jhPhoneTopNum" placeholder="请输入数字" style="width: 70px;margin: 0px;" type="number"/>
      </el-form-item>
      <el-form-item label="张，去掉底部" label-width="108px" prop="jhPhoneBottomNum" style="margin: 0px;">
        <el-input v-model.number="settingform.jhPhoneBottomNum" placeholder="请输入数字" style="width: 70px;margin: 0px;" type="number"/>
      </el-form-item>
      <el-form-item label="张，只保留前" label-width="108px" prop="sjkeepFirstCount" style="margin: 0px;">
        <el-input v-model.number="settingform.jhPhoneReserveNum" placeholder="请输入数字" style="width: 70px;margin: 0px;" type="number"/>
      </el-form-item>
      <el-form-item label="张" label-width="40px" prop="zhang">
      </el-form-item>
    </div>
    <!-- 新增添加前缀表单项 -->
    <el-form-item label="添加前缀" prop="jhPrefix">
      <div style="display: flex; align-items: center;">
        <el-input v-model="settingform.jhPrefix" placeholder="详情前缀图片" style="width: 200px; margin-right: 10px;"></el-input>
        <el-link style="margin-right: 10px;" type="primary" @click="selectImage">选择图片</el-link>
        <el-link type="danger" @click="clearImage">清除</el-link>
      </div>
    </el-form-item>
    <!-- 新增添加后缀表单项 -->
    <el-form-item label="添加后缀" prop="jhSuffix">
      <div style="display: flex; align-items: center;">
        <el-input v-model="settingform.jhSuffix" placeholder="详情后缀图片" style="width: 200px; margin-right: 10px;"></el-input>
        <el-link style="margin-right: 10px;" type="primary" @click="selectSuffixImage">选择图片</el-link>
        <el-link type="danger" @click="clearSuffixImage">清除</el-link>
      </div>
    </el-form-item>

    <!-- 新增动态查找替换输入框组 -->
    <div v-for="(pair, index) in settingform.imageFindReplacePairs" :key="pair.key" style="display: flex; align-items: center; margin-top: 10px;">
      <el-form-item :prop="'imageFindReplacePairs.' + index + '.find'" label="查找内容" style="margin-right: 10px;">
        <el-input v-model="pair.find" maxlength="10" placeholder="查找内容" show-word-limit style="width: 150px"/>
      </el-form-item>
      <el-form-item :prop="'imageFindReplacePairs.' + index + '.replace'" label="替换成为" style="margin-right: 10px;">
        <el-input v-model="pair.replace" maxlength="10" placeholder="替换内容" show-word-limit style="width: 150px"/>
        <el-button
          class="custom-add-btn"
          icon="el-icon-plus"
          size="small"
          style="margin-left: 10px;"
          @click="addImageFindReplacePair"
        ></el-button>
        <el-button
          v-if="settingform.imageFindReplacePairs.length > 1"
          class="custom-remove-btn"
          icon="el-icon-minus"
          size="small"
          style="margin-left: 10px;"
          @click.prevent="removeImageFindReplacePair(index)"
        ></el-button>
      </el-form-item>
    </div>
    <h3>水印</h3>
    <!-- 新增水印类型单选框 -->
    <el-form-item label="水印类型：" label-width="auto" style="margin-left: 0;">
      <el-radio-group v-model="settingform.jhWatermarkType">
        <el-radio label="文字">文字</el-radio>
        <el-radio label="图片">图片</el-radio>
      </el-radio-group>
    </el-form-item>
    <!-- 新增水印文字输入框 -->
    <el-form-item label="水印文字" prop="jhWatermarkWord" style="margin-left: 0;">
      <el-input v-model="settingform.jhWatermarkWord" placeholder="请输入水印文字" style="width: 300px;"/>
    </el-form-item>

    <!-- 新增透明度滑块 -->
    <el-form-item label="透明度：" prop="jhWatermarkTransparence" style="margin-left: 0;">
      <el-slider
        v-model="settingform.jhWatermarkTransparence"
        :max="1"
        :min="0"
        :step="0.1"
        show-input
        style="width: 300px;"
      />
    </el-form-item>

    <!-- 新增水印位置选择 -->
    <el-form-item label="水印位置：" label-width="auto" prop="jhWatermarkPlace" style="margin-left: 0;">
      <el-select v-model="settingform.jhWatermarkPlace" placeholder="请选择位置" style="width: 150px; margin-right: 10px;">
        <el-option label="左上" value="leftTop"></el-option>
        <el-option label="右上" value="rightTop"></el-option>
        <el-option label="居中" value="center"></el-option>
      </el-select>
      <el-button type="primary" @click="previewWatermark">预览</el-button>
    </el-form-item>

    <!-- 新增使用水印的图片复选框组 -->
    <el-form-item label="使用水印的图片" label-width="auto" style="margin-left: 0;">
      <el-checkbox v-model="settingform.isWatermarkFirstImage">首张主图</el-checkbox>
      <el-checkbox v-model="settingform.isWatermarkOtherImages">其他主图</el-checkbox>
      <el-checkbox v-model="settingform.isWatermarkColorDesc">颜色和描述图</el-checkbox>
    </el-form-item>

    <h3>图片压缩</h3>
    <!-- 新增压缩率下拉框 -->
    <el-form-item label="图片压缩率" label-width="auto" style="margin-left: 0;">
      <el-select v-model="settingform.jhPictureCompressibility" placeholder="请选择压缩率" style="width: 150px; margin-right: 10px;">
        <el-option :value="100">100</el-option>
        <el-option :value="120">120</el-option>
        <el-option :value="150">150</el-option>
      </el-select>
      <span style="color: #8492a6; font-size: 12px;">数字越大质量越好，数字越小体积越小</span>
    </el-form-item>

  </el-form>
</template>

<script>
export default {
  name: "JhTemplateForm",
  data() {
    return {
      settingform: {
        jhMainImageSeq: null,
        jhIsCopyVideo: false,
        jhIsFirstPictureReplace: false,
        jhIsOtherPictureReplace: false,
        prefixImage: null, // 新增字段
        suffixImage: null, // 新增字段
        imageFindReplacePairs: [{find: '', replace: ''}], // 新增字段
        isWatermarkFirstImage: false, // 新增字段
        isWatermarkOtherImages: false, // 新增字段
        isWatermarkColorDesc: false, // 新增字段
        colorHorizontalFlip: false, // 新增字段
        colorVerticalFlip: false, // 新增字段
        isHorizontalFlip: false, // 新增字段
        isVerticalFlip: false, // 新增字段
        isMergeImage: false, // 新增字段
        jhIsCopyColor: false, // 新增字段
        jhWatermarkType: null, // 新增字段
        jhDescMode: null,
        componentKey: null,
        jhWatermarkWord: null,
        jhWatermarkPlace: null,
        jhWatermarkTransparence: null,
        jhPictureCompressibility: null,
        jhSuffix: null,
        jhIsCopyDesc: false,
        jhIsCopyTitle: false,
        jhIsCopySku: false,
        jhPcTopNum: null,
        jhPcBottomNum: null,
        jhPcReserveNum: null,
        jhPhoneTopNum: null,
        jhPhoneBottomNum: null,
        jhPhoneReserveNum: null,
        jhPrefix: null,
      },
      rules: {
        jhRevision: [
          {required: true, message: "乐观锁不能为空", trigger: "blur"}
        ],
        jhCreatedBy: [
          {required: true, message: "创建人不能为空", trigger: "blur"}
        ],
        jhCreatedTime: [
          {required: true, message: "创建时间不能为空", trigger: "blur"}
        ],
        jhUpdatedBy: [
          {required: true, message: "更新人不能为空", trigger: "blur"}
        ],
        jhUpdatedTime: [
          {required: true, message: "更新时间不能为空", trigger: "blur"}
        ],
        jhTemplateName: [
          {required: true, message: "模版名称不能为空", trigger: "blur"}
        ],
        jhCode: [
          {required: true, message: "商家编码不能为空", trigger: "blur"}
        ],
      }
    }
  },
  // 优化setData方法用于接收父组件数据
  methods: {
    setData(form) {
      // 使用$nextTick确保响应式更新
      this.$nextTick(() => {
        // 重新构建settingform对象确保响应式
        this.settingform = {
          ...this.settingform,
          // 基础设置
          jhMainImageSeq: form.jhMainImageSeq || null,
          jhIsCopyVideo: form.jhIsCopyVideo === true || form.jhIsCopyVideo === 'true',
          jhIsFirstPictureReplace: form.jhIsFirstPictureReplace === true || form.jhIsFirstPictureReplace === 'true',
          jhIsOtherPictureReplace: form.jhIsOtherPictureReplace === true || form.jhIsOtherPictureReplace === 'true',
          jhIsCopyColor: form.jhIsCopyColor === true || form.jhIsCopyColor === 'true',
          prefixImage: form.prefixImage || null,
          suffixImage: form.suffixImage || null,
          jhDescMode: ['both', 'desktop', 'mobile', 'none'].includes(form.jhDescMode) ? form.jhDescMode : null,
          
          // 水印设置
          jhWatermarkType: form.jhWatermarkType || null,
          jhWatermarkWord: form.jhWatermarkWord || '',
          jhWatermarkTransparence: Number(form.jhWatermarkTransparence) || 0,
          jhWatermarkPlace: form.jhWatermarkPlace || '',
          
          // 图片压缩率
          jhPictureCompressibility: form.jhPictureCompressibility || null,
          
          // 电脑端详情图设置
          jhPcTopNum: form.jhPcTopNum || null,
          jhPcBottomNum: form.jhPcBottomNum || null,
          jhPcReserveNum: form.jhPcReserveNum || null,
          
          // 手机端详情图设置
          jhPhoneTopNum: form.jhPhoneTopNum || null,
          jhPhoneBottomNum: form.jhPhoneBottomNum || null,
          jhPhoneReserveNum: form.jhPhoneReserveNum || null,
          
          jhPrefix: form.jhPrefix || null,
          jhSuffix: form.jhSuffix || null
        };

        // 图片查找替换对
        try {
          if (form.jhTemplateFindImage && form.jhTemplateReplaceImage) {
            const findArr = JSON.parse(form.jhTemplateFindImage) || [];
            const replaceArr = JSON.parse(form.jhTemplateReplaceImage) || [];
            this.settingform.imageFindReplacePairs = findArr.map((find, index) => ({
              find: find || '', 
              replace: replaceArr[index] || '',
              key: Date.now() + index
            }));
          } else {
            this.settingform.imageFindReplacePairs = [{find: '', replace: '', key: Date.now()}];
          }
        } catch (error) {
          console.warn('解析图片查找替换对失败:', error);
          this.settingform.imageFindReplacePairs = [{find: '', replace: '', key: Date.now()}];
        }

        // 水印范围
        try {
          if (form.jhWatermarkScope) {
            const scope = JSON.parse(form.jhWatermarkScope);
            this.settingform.isWatermarkFirstImage = scope.firstImage || false;
            this.settingform.isWatermarkOtherImages = scope.otherImages || false;
            this.settingform.isWatermarkColorDesc = scope.colorDesc || false;
          }
        } catch (error) {
          console.warn('解析水印范围失败:', error);
        }

        // 主图处理模式
        try {
          if (form.jhPrimaryPictureMode) {
            const mode = JSON.parse(form.jhPrimaryPictureMode);
            this.settingform.isHorizontalFlip = mode.horizontalFlip || false;
            this.settingform.isVerticalFlip = mode.verticalFlip || false;
            this.settingform.isMergeImage = mode.mergeImage || false;
          }
        } catch (error) {
          console.warn('解析主图处理模式失败:', error);
        }

        // 颜色处理模式
        try {
          if (form.jhColorMode) {
            const mode = JSON.parse(form.jhColorMode);
            this.settingform.colorHorizontalFlip = mode.horizontalFlip || false;
            this.settingform.colorVerticalFlip = mode.verticalFlip || false;
          }
        } catch (error) {
          console.warn('解析颜色处理模式失败:', error);
        }

        // 强制更新组件
        this.$forceUpdate();
      });
    },
    selectImage() { // 新增方法
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = 'image/*';
      input.onchange = (e) => {
        const file = e.target.files[0];
        this.settingform.prefixImage = file.name;
      };
      input.click();
    },
    clearImage() { // 新增方法
      this.settingform.prefixImage = '';
    },
    selectSuffixImage() { // 新增方法
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = 'image/*';
      input.onchange = (e) => {
        const file = e.target.files[0];
        this.settingform.suffixImage = file.name;
      };
      input.click();
    },
    clearSuffixImage() { // 新增方法
      this.settingform.suffixImage = '';
    },
    addImageFindReplacePair() { // 新增方法
      this.settingform.imageFindReplacePairs.push({find: '', replace: ''});
    },
    removeImageFindReplacePair(index) { // 新增方法
      this.settingform.imageFindReplacePairs.splice(index, 1);
    },
    previewWatermark() {
      console.log('预览水印功能尚未实现');
      // 这里可以添加预览逻辑，比如显示预览窗口或更新UI
    },
    reset() {
      this.settingform = {
        jhMainImageSeq: null,
        jhIsCopyVideo: false,
        jhIsFirstPictureReplace: false,
        jhIsOtherPictureReplace: false,
        prefixImage: null,
        suffixImage: null,
        imageFindReplacePairs: [{find: '', replace: ''}],
        isWatermarkFirstImage: false,
        isWatermarkOtherImages: false,
        isWatermarkColorDesc: false,
        jhWatermarkType: null,
        jhWatermarkWord: '',
        jhWatermarkTransparence: 0,
        jhWatermarkPlace: null,
        jhPictureCompressibility: null,
        colorHorizontalFlip: false, // 新增字段
        colorVerticalFlip: false, // 新增字段
        isHorizontalFlip: false, // 新增字段
        isVerticalFlip: false, // 新增字段
        isMergeImage: false, // 新增字段
        jhIsCopyColor: false, // 新增字段
        jhDescMode: null,
      };
    },
    // 修改后的获取表单数据方法
    getFormData() {
      // 处理后的查找替换对
      const processedPairs = JSON.parse(JSON.stringify(this.settingform.imageFindReplacePairs))
        .map(pair => ({
          find: pair.find.trim() || null,
          replace: pair.replace.trim() || null
        }))
        .filter(pair => pair.find !== null || pair.replace !== null);
      // 转换为数组格式
      const findArray = processedPairs.map(p => p.find).filter(x => x);
      const replaceArray = processedPairs.map(p => p.replace).filter(x => x);
      // 创建主图处理模式对象
      const primaryMode = {
        horizontalFlip: this.settingform.isHorizontalFlip,
        verticalFlip: this.settingform.isVerticalFlip,
        mergeImage: this.settingform.isMergeImage
      };
      // 新增颜色处理模式对象
      const colorMode = {
        horizontalFlip: this.settingform.colorHorizontalFlip,
        verticalFlip: this.settingform.colorVerticalFlip
      };
      // 新增水印范围对象
      const watermarkScope = {
        firstImage: this.settingform.isWatermarkFirstImage,
        otherImages: this.settingform.isWatermarkOtherImages,
        colorDesc: this.settingform.isWatermarkColorDesc
      };

      return {
        ...this.settingform,
        jhColorMode: JSON.stringify(colorMode),
        jhPrimaryPictureMode: JSON.stringify(primaryMode),
        jhTemplateFindImage: findArray.length > 0 ? JSON.stringify(findArray) : null,
        jhTemplateReplaceImage: replaceArray.length > 0 ? JSON.stringify(replaceArray) : null,
        jhWatermarkScope: JSON.stringify(watermarkScope)
      };
    }
  }
}
</script>
